<template>
  <div>
    <div style="height:80px">
      <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="map.findid" placeholder="模板编码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="map.findname" placeholder="模板名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="seltemplateall()">查询</el-button>
      </el-form-item>
      <el-button type="warning" @click="dialog = true">添加方案模板</el-button>
    </el-form>
    </div>
    <div>
      <el-table
      :data="page.rows"
      border
      style="width: 100%">
      <el-table-column
        prop="interTempId"
        label="模板编码"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="interTempTitle"
        label="模板名称"
        width="240"
        align="center">
      </el-table-column>
      <el-table-column
        prop="interTempKey"
        label="模板关键词"
        width="200"
        align="center">
      </el-table-column>
      <el-table-column
        prop="interTempApply"
        label="适用人群"
        width="190"
        align="center">
      </el-table-column>
      <el-table-column
        prop="interTempTarget"
        label="模板目标"
        width="190"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="228"
        align="center"
        prop="interTempId">
        <template slot-scope="scope">
          <el-button type="text"  v-if="scope.row.interTempState == 0" @click="jing(scope.row.interTempId)">禁用</el-button>
          <el-button type="text" style="color: red"  v-if="scope.row.interTempState == 1" @click="qi(scope.row.interTempId)">启用</el-button>
          <el-button type="text" @click="seltemplateone(scope.row.interTempId)" >编辑</el-button>
          <el-button type="text" slot="reference" @click="deltemplate(scope.row.interTempId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="block">
      <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 9, 15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>

    <el-dialog
      title="模板信息"
      :visible.sync="dialog"
      width="60%"
      center
      :before-close="cleartemplate">
      <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="基本信息" name="first" >
            <el-form :rules="rules" ref="template" :model="template" label-width="100px" class="demo-ruleForm" inline-message>
              <el-form-item label="模板编号" prop="interTempId" hidden>
                  <el-input v-model="template.interTempId" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="模板名称" prop="interTempTitle">
                  <el-input v-model="template.interTempTitle" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="模板关键词" prop="interTempKey">
                  <el-input v-model="template.interTempKey" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="适用人群" prop="interTempApply">
                  <el-input v-model="template.interTempApply" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="方案目标" prop="interTempTarget">
                  <el-input v-model="template.interTempTarget" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="方案描述" prop="interTempDesc">
                  <el-input v-model="template.interTempDesc" style="width: 80%"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="膳食方案" name="second" >
            <el-table
              ref="foods"
              :data="foods"
              highlight-current-row
              @current-change="addfood"
              style="width: 100%"
              height="300px">
              <el-table-column
                type="index"
                width="200">
              </el-table-column>
              <el-table-column
                prop="foodZongTitle"
                label="方案名称"
                width="210">
              </el-table-column>
              <el-table-column
                prop="foodZongDesc"
                label="方案描述"
                width="400">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="运动方案" name="third" >
            <el-table
              ref="keeps"
              :data="keeps"
              highlight-current-row
              @current-change="addkeep"
              style="width: 100%"
              height="300px">
              <el-table-column
                type="index"
                width="200">
              </el-table-column>
              <el-table-column
                prop="keepZongTitle"
                label="方案名称"
                width="210">
              </el-table-column>
              <el-table-column
                prop="keepZongDesc"
                label="方案描述"
                width="400">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="健康方案" name="fourth" >
            <el-table
              ref="wholesomes"
              :data="wholesomes"
              highlight-current-row
              @current-change="addwho"
              style="width: 100%"
              height="300px">
              <el-table-column
                type="index"
                width="200">
              </el-table-column>
              <el-table-column
                prop="tempWhoTitle"
                label="方案名称"
                width="210">
              </el-table-column>
              <el-table-column
                prop="tempWhoDesc"
                label="方案描述"
                width="400">
              </el-table-column>
            </el-table>
          </el-tab-pane>
       </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cleartemplate(template)">取 消</el-button>
        <el-button type="primary" @click="subtemplate()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default ({
  data () {
    return {
      dialog: false,
      activeName: 'first',
      map: {
        index: '',
        findid: '',
        findname: ''
      },
      page: {},
      currentPage: 1,
      pageSize: 5,
      foods: [],
      keeps: [],
      wholesomes: [],
      template: {
        interTempId: '',
        interTempTitle: '',
        interTempKey: '',
        interTempApply: '',
        interTempTarget: '',
        interTempDesc: '',
        tempWhoId: '',
        tempKeepId: '',
        tempFoodId: '',
        interTempState: ''
      },
      food: {},
      keep: {},
      who: {},
      currentRow: null,
      rules: {
        interTempTitle: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
        interTempKey: [{ required: true, message: '请输入方案关键字', trigger: 'blur' }],
        interTempApply: [{ required: true, message: '请输入适用人群', trigger: 'blur' }],
        interTempTarget: [{ required: true, message: '请输入方案目标', trigger: 'blur' }],
        interTempDesc: [{ required: true, message: '请输入方案描述', trigger: 'blur' }]
      }
    }
  },
  methods: {
    seltemplateall () {
      this.map.index = this.currentPage
      this.map.pageSize = this.pageSize
      axios.post('/api/template/seltemplateall', this.map).then(result => {
        this.page = result.data
      })
    },
    seltemplateone (id) {
      axios.get('/api/template/seltemplateone/' + id).then(result => {
        this.template = result.data
        this.dialog = true
        this.$nextTick(() => {
          let temp1 = null
          this.foods.forEach((e, i) => {
            if (e.foodZongId === this.template.tempFoodId) {
              temp1 = this.foods[i]
            }
          })
          let temp2 = null
          this.keeps.forEach((e, i) => {
            console.log(this.template)
            if (e.keepZongId === this.template.tempKeepId) {
              temp2 = this.keeps[i]
            }
          })
          let temp3 = null
          this.wholesomes.forEach((e, i) => {
            if (e.tempWhoId === this.template.tempWhoId) {
              temp3 = this.wholesomes[i]
            }
          })
          this.$refs.foods.setCurrentRow(temp1)
          this.$refs.keeps.setCurrentRow(temp2)
          this.$refs.wholesomes.setCurrentRow(temp3)
        })
      })
    },
    deltemplate (id) {
      this.$confirm('是否删除该方案', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          axios.get('/api/template/deltemplate/' + id).then(result => {
            if (result.data) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$message.error('删除失败，请稍后重试')
            }
            this.seltemplateall()
          })
        })
        .catch(action => {
          this.$message('已取消删除')
        })
    },
    subtemplate () {
      this.$refs.template.validate((valid) => {
        if (valid) {
          if (this.template.tempFoodId === '') {
            this.$message.error('请选择膳食方案')
            this.activeName = 'second'
          } else {
            if (this.template.tempKeepId === '') {
              this.$message.error('请选择运动方案')
              this.activeName = 'third'
            } else {
              if (this.template.tempWhoId === '') {
                this.$message.error('请选择健康方案')
                this.activeName = 'fourth'
              } else {
                if (this.template.interTempId === '') {
                  axios.post('/api/template/addtemplate', this.template).then(result => {
                    if (result.data) {
                      this.$message({
                        message: '新增方案成功',
                        type: 'success'
                      })
                    } else {
                      this.$message.error('新增失败，请稍后重试')
                    }
                    this.cleartemplate()
                    this.seltemplateall()
                  })
                } else {
                  axios.post('/api/template/uptemplate', this.template).then(result => {
                    if (result.data) {
                      this.$message({
                        message: '编辑方案成功',
                        type: 'success'
                      })
                    } else {
                      this.$message.error('编辑失败，请稍后重试')
                    }
                    this.cleartemplate()
                    this.seltemplateall()
                  })
                }
              }
            }
          }
        } else {
          this.activeName = 'first'
        }
      })
    },
    selwholesomeall () {
      axios.post('/api/template/selwholesomeall').then(result => {
        this.wholesomes = result.data
      })
    },
    selfoodall () {
      axios.post('/api/template/selfoodall').then(result => {
        this.foods = result.data
      })
    },
    selkeepall () {
      axios.post('/api/template/selkeepall').then(result => {
        this.keeps = result.data
      })
    },
    cleartemplate (template) {
      this.template = {
        interTempId: '',
        interTempTitle: '',
        interTempKey: '',
        interTempApply: '',
        interTempTarget: '',
        interTempDesc: '',
        tempWhoId: '',
        tempKeepId: '',
        tempFoodId: '',
        interTempState: ''
      }
      this.$refs.template.resetFields()
      this.dialog = false
      this.activeName = 'first'
    },
    addfood (val) {
      this.template.tempFoodId = val.foodZongId
      this.currentRow = val
    },
    addkeep (val) {
      this.template.tempKeepId = val.keepZongId
    },
    addwho (val) {
      this.template.tempWhoId = val.tempWhoId
    },
    jing (id) {
      axios.get('/api/template/jing/' + id).then(result => {
        if (result.data) {
          this.$message({
            message: '已设置成禁用',
            type: 'success'
          })
        } else {
          this.$message.error('设置失败，请稍后重试')
        }
        this.seltemplateall()
      })
    },
    qi (id) {
      axios.get('/api/template/qi/' + id).then(result => {
        if (result.data) {
          this.$message({
            message: '已设置成启用',
            type: 'success'
          })
        } else {
          this.$message.error('设置失败，请稍后重试')
        }
        this.seltemplateall()
      })
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.seltemplateall()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.seltemplateall()
    }
  },
  created () {
    this.seltemplateall()
    this.selwholesomeall()
    this.selfoodall()
    this.selkeepall()
  }
})
</script>

<style scoped>

</style>
